<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/echarts.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/dataTool.js" ></script>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		$(function(){
			initEchart();
		});
		function initEchart(){
//		myChart.showLoading();
//		$.get("../../js/json/echart.json", function(graph){	
		$.getJSON("http://127.0.0.1:8020/admin_mw/js/json/echart.json",function(graph){	
			myChart.hideLoading();
			
		    var categories = [];
		    var max = 0;
		    graph.nodes.forEach(function (node) {
		        node.itemStyle = null;
		        node.symbolSize = node.size;
		        node.value = node.symbolSize;
		        node.category = node.category;
		        // Use random x, y
		        node.x = node.y = null;
		        node.draggable = true;
		        if(node.category>max){
                    max = node.category;
                }
		    });
		    for (var i = 0; i <= max; i++) {
                categories[i] = {
                    name: '层级' + i
                };
            }
		    
		    option = {
		    	color: ['#000033','#6991e9','#fff33f','#de4e93','#24ddcf','#ff9611','#19d535','#d7003f','#1774ff','#8236f','#0090e6','#ccff0','#9578ff','#18ce7f'],
		        title: {
		            text: '脉络图',
		            subtext: 'Default layout',
		            top: 'bottom',
		            left: 'right'
		        },
		        tooltip: {
		        	formatter: function (params) {
                    if (params.dataType === 'node') {
                      var colorEl = '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + params.color + '"></span>';
                      return colorEl + params.name;
                    }
                  }
		        },
		        legend: [{
		            // selectedMode: 'single',
		            data: categories.map(function (a) {
		                return a.name;
		            })
		        }],
		        animation: false,
		        series : [
		            {
		                name: '未来脉络',
		                type: 'graph',
		                layout: 'force',
		                data: graph.nodes,
		                links: graph.links,
		                legendHoverLink: true,
                        focusNodeAdjacency: true,
		                categories: categories,
		                roam: true,
		                label: {
		                    normal: {
		                        position: 'right'
		                    }
		                },
		                force: {
		                    repulsion: 100
		                },
		                lineStyle: {
	                        normal: {
	                            color: 'source',
	                            curveness: 0.3
	                        }
	                    }
		            }
		        ]
		    };
		
		    myChart.setOption(option);
		});
		}
	</script>
</body>
</html>
